<template>
    <div class="profile-header">
        <el-skeleton v-if="!loading" :rows="4" animated>
            <template #template>
                <el-skeleton-item variant="circle" style="width: 48px; height: 48px" />
                <div class="user-info__skeleton flex-justify-center flex-column">
                    <el-skeleton-item variant="text" style="width: 25%;" />
                    <el-skeleton-item variant="text" style="width: 30%;" />
                    <el-skeleton-item variant="text" style="width: 25%;" />
                    <div>
                        <el-skeleton-item variant="text" style="width: 10%;" />
                        <el-skeleton-item variant="text" style="width: 10%; margin-left: 15px;" />
                    </div>
                    <div>
                        <el-skeleton-item variant="button" class="skeleton-button" />
                        <el-skeleton-item variant="button" class="skeleton-button" style="margin-left: 15px;" />
                    </div>
                </div>
            </template>
        </el-skeleton>
        <template v-else>
            <Avatar :size="48" style="margin: 0 auto;" :src="userInfo.avatarUrl"></Avatar>
            <p class="user-name">
                <span>{{ userInfo.name }}</span>
                <i v-if="userInfo.gender"
                    class="icon" :class="`icon-${userInfo.gender === 1 ? 'boy' : 'girl'}`">
                </i>
            </p>
            <p v-show="userInfo.brief">{{ userInfo.brief }}</p>
            <p v-if="userInfo.area?.length">
                <span style="margin-right: 2px;">来自</span>
                <span style="color: var(--color-text-s);">{{ getCity(userInfo?.area) }}</span>
            </p>
            <p class="follow-block">
                <a>关注: {{ userInfo.follow }}</a>
                <a>粉丝: {{ userInfo.fans }}</a>
            </p>
            <p>
                <el-button v-if="myInfo && myInfo.id === userInfo.id" @click="editProfile">编辑资料</el-button>
                <template v-else>
                    <el-button @click="followingClick">关注</el-button>
                    <el-button>私信</el-button>
                </template>
            </p>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { toRefs, PropType } from 'vue'
import { useRouter } from 'vue-router'
import { CodeToText } from 'element-china-area-data'
import Avatar from '@/components/common/Avatar.vue'
import { UserInfor } from '@/apis/user/types'
import { following } from '@/apis/user'

const router = useRouter()
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    userInfo: {
        type: Object as PropType<UserInfor>,
        default: {}
    },
    myInfo: {
        type: Object as PropType<UserInfor>,
        default: {}
    }
})

const { loading, userInfo, myInfo } = toRefs(props)

// 获取城市地址
const getCity = (data: Array<string> | undefined) => {
    if(data && data.length) {
        const name = CodeToText[data[1]]
        return name === '市辖区' ? CodeToText[data[0]] : name
    }
}

// 关注
const followingClick = () => {
    const data = {
        myId: myInfo.value.id,
        id: userInfo.value.id
    }
    following(data).then(res => {
        console.log(res)
    })
}

// 编辑个人资料点击
const editProfile = () => {
    router.push({
        path: `/user/editor/info`
    })
}
</script>

<style lang="less" scoped>
.profile-header {
    background-color: var(--color-white);
    padding: 15px 0;
    text-align: center;
    > p {
        margin-top: 15px;
        color: var(--color-text-l);
    }
    .follow-block > a{
        margin: 0 10px;
    }
    .icon {
        margin-left: 3px;
    }
    .icon-boy {
        color: #3494eb;
    }
    .icon-girl {
        color: #ef6eaf;
    }
}
.user-info__skeleton {
    :deep(.el-skeleton__item ) {
        margin: 15px auto 0 auto;
    }
}
</style>